{% extends "base.html" %}

{% block breadcrumb %}{{ block.super }} &raquo; <a href="/device/">Devices</a> &raquo; {{ device }}{% endblock %}

{% block errors %}
{% endblock %}

{% block content %}
<div class="form-wrapper">
 <div class="ui-widget-header ui-corner-top">General</div>
 <div class="form-content ui-widget-content ui-corner-bottom">
  <form action="/device/{{ device.id }}/" method="post">
   {% csrf_token %}
   <div><div class="form-label">{{ device_form.mac_address.label }}:</div><div class="form-input">{{ device_form.mac_address }}</div></div>
   <div><div class="form-label">{{ device_form.description.label }}:</div><div class="form-input">{{ device_form.description }}</div></div>
   <div><div class="form-label">{{ device_form.model.label }}:</div><div class="form-input">{{ device_form.model }}</div></div>
   <div><div class="form-label">{{ device_form.location.label }}:</div><div class="form-input">{{ device_form.location }}</div></div>
   <div class="form-submit"><input type="submit" value="Save" /></div>
  </form>
 </div>
</div>

{% if max_lines %}
<div class="form-wrapper">
 <div class="ui-widget-header ui-corner-top">Line Appearances</div>
 <div id="lines">
  <ul>
{% for line in max_lines %}
   <li><a href="/device/{{ device.id }}/line/{{ line }}/" title="Edit Line"><span id="tab-line-{{ line }}">(Unknown)</span></a></li>
{% endfor %}
  </ul>
  <div id="Edit_Line" class="ui-tabs-hide"></div>
 </div>
</div>
{% endif %}

<script>
$(function() {
/*  $("#lines").tabs({ spinner: '' }).removeClass("ui-corner-all").addClass("ui-corner-bottom").find(".ui-tabs-nav").sortable({ axis:'x'}); */
  $("#lines").tabs({ spinner: '' }).removeClass("ui-corner-all").addClass("ui-corner-bottom");
{% for line in max_lines %}
  $("#tab-line-{{ line }}").load("/device/{{ device.id }}/line_label/{{ line }}/");
{% endfor %}
});
</script>

{% endblock %}
